<template>
    <div class="content positionR">
        <div class="swiper-container" v-if="swiperMsg.imagesList && swiperMsg.imagesList.length > 0">
            <span class="iconfont icon-close icon-close-btn" v-if="swiperMsg.closeBtn" @click="$emit('close')"></span>
            <swiper :options="swiperOption" ref="mySwiper" v-if="swiperShow">
                <swiper-slide v-for="(value,index) in swiperMsg.imagesList" :key="index">
                    <img class="swiper-item-img" :src="value"  @click="$emit('clickSwiperItem')">
                    <div class="swiper-bg" v-if="swiperMsg.needBlur">
                        <img class="swiper-bg-img" :src="value" alt="">
                    </div>
                    <div v-if="swiperMsg.itemListImg && swiperMsg.itemListImg.length > 0" class="">{{swiperMsg.itemListImg[index].description}}</div>
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination" slot="pagination"></div>
        </div>
        <div v-if="swiperShow && swiperMsg.imagesList.length > 0 && swiperMsg.useSwiperPagination" class="self-swiper-pagination">
            <span>{{noIndex}}/{{swiperMsg.imagesList.length}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FullHeightSwiper",
        props:{
            FHSwiperMsg:{
                type:Object,
            },
            swiperOptionProp:{
                type:Object,
            }
        },
        data(){
            return {
                swiperShow:false,
                noIndex:1,
                swiperOption: {
                    pagination: '.self-swiper-pagination',
                    paginationType: 'fraction',
                    loop:false,
                    autoplay:false,
                    autoplayDisableOnInteraction: true,
                    // noSwiping : true,
                    fade: {/*配合onTransitionEnd解决滑动之后有时不触发slide结束的bug*/
                        crossFade: true,
                    },
                    onInit:function(swiper){
                        /*这个是主要是好看里面要自动轮播之后要自动滑到下一页*/
                        /*TODO 暂时不做*/
                        // if(swiper.activeIndex == this.swiperMsg.imagesList.length -1){
                        //     this.$emit('lastSlide',5000);
                        // }
                    }.bind(this),
                    onTransitionEnd: function (swiper) {
                        this.$emit('change-end-cb',swiper.activeIndex + 1);
                        if(swiper.activeIndex == this.swiperMsg.imagesList.length -1){
                            this.$emit('lastSlide');
                        }
                        this.noIndex = swiper.activeIndex + 1;
                    }.bind(this),
                },
                swiperMsg:{
                    useSwiperPagination:false,
                    autoplay:false,
                    imagesList:[],
                    closeBtn:false,
                    needBlur:true,
                    itemListDes:{
                        showDescription:false,
                        list:[
                            {
                                description:''
                            }
                        ]
                    }
                    // noSwiper:true,
                }
            }
        },
        mounted(){
            let that = this;
            this.swiperMsg = Object.assign(this.swiperMsg,this.FHSwiperMsg);
            this.swiperOption = Object.assign({},this.swiperOption,this.swiperOptionProp);
            this.swiperShow = true;
        },
        methods:{
            stopSwiper(){

            }
        },
        watch:{
            FHSwiperMsg(val){
                this.swiperMsg = Object.assign({},this.swiperMsg,val);
            },
            swiperOptionProp(val){
                this.swiperOption = Object.assign({},this.swiperOption,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination{
        opacity: 0;
        position: relative;
        z-index: -1;
    }
    .swiper-container{
        height: 6.67rem;
        height: 100vh;
        overflow: hidden;
    }
    .swiper-slide{
        height: 100%;
        overflow: hidden;
        .swiper-item-img{
            width: 100%;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            /*height: 100%;*/
            /*object-fit: cover;*/
        }
    }
    .swiper-bg{
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: #000;
    }
    .swiper-bg-img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter:blur(40px);
    }
    .self-swiper-pagination{
        position: absolute;
        top: .2rem;
        right: .15rem;
        background-color: rgba(0, 0, 0, 0.2);
        color: #fff;
        font-size: .1rem;
        padding: 0.01rem .06rem;
        border-radius: .25rem;
        z-index: 1;
    }
    .icon-close-btn{
        font-size: .34rem;
        color: #fff;
        -webkit-box-shadow: 0 0 1px #ccc;
        box-shadow: 0 0 1px #ccc;
        position: absolute;
        top: .3rem;
        left: .3rem;
        z-index: 1030;
    }
</style>